<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="common/common_head :: commonHeader('新增通知类型')"/>
    <link th:href="@{/css/plugins/datapicker/datepicker3.css}" rel="stylesheet">
    <link th:href="@{/css/plugins/chosen/chosen.css}" rel="stylesheet">
    <style type="text/css">
        .col-sm-3 {
            width: 27% !important;
        }
    </style>
</head>

<body class="gray-bg">

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="form-group">
            <div class="col-sm-8" style="margin-left: 16px">
                <input class="btn btn-primary" type="button" value="保存" onclick="save()">
                <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>通知定义</h5>
                </div>
                <div class="ibox-content">
                    <div class="form-group row" style="margin-bottom: 30px;">
                        <label class="col-sm-3 control-label"><span class="required-sign">*</span>通知类型：</label>
                        <div class="col-sm-6">
                            <input id="kind" name="kind" type="text" placeholder="通知类型" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row" style="margin-bottom: 30px;">
                        <label class="col-sm-3 control-label">备注：</label>
                        <div class="col-sm-6">
                            <input id="remark" name="remark" type="text" placeholder="备注" class="form-control">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-sm-4">
            <div class="box-content">
                <table id="role"></table>
            </div>
        </div>
    </div>
</div>

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<!-- Chosen -->
<script th:src="@{/static/js/plugins/chosen/chosen.jquery.js}"></script>

<script type="text/javascript">

    $(function () {
        getROle();
    })

    var searcher = Searcher.createBS('#role',
        [
            {checkbox: true},
            {title: "角色名称", field: "roleName", align: 'center', valign: 'middle'},
            {title: "备注", field: "remark", align: 'center', valign: 'middle'},
        ], {
            pagination: false,
            pageSize: 100,
            "showColumns": false,
            "showRefresh": false,
            "firstLoad": false,
            "showExport": false
        }
    );

    function getROle() {
        //后台获取报告库报数据
        $.ajax({
            url: ctxPath + "/sys/role/list",
            dataType: "json",
            success: function (data) {
                let role = data.result.list;
                //将数据绑定到表格
                $("#role").bootstrapTable('append', role);
            }
        });
    }

    /**
     * 保存
     */
    function save() {

        let kind = $("#kind").val();
        if (!kind) {
            Dialog.errorMsg("请输入通知类型！");
            return false;
        }
        let data = {"kind": kind};

        let roleList = searcher.getSelectedRows("roleId");
        if(roleList.length==0){
            Dialog.errorMsg("请选择角色！");
            return false;
        }
        data["roleList"] = roleList;


        let remark=$("#remark").val();
        if(remark||remark.trim()){
            data["remark"] = remark;
        }

        layer.load(1,{shade: [0.3, '#393D49']});
        $.ajax({
            type: "POST",
            url: ctxPath + "/noticeDefinition/saveDefinition",
            data: JSON.stringify(data),
            contentType : "application/json;charsetset=UTF-8",
            dataType:"json",
            success: function (data) {
                layer.closeAll();
                if(data.code==0){
                    Dialog.msg("新建成功!",function(){
                        Dialog.closeFrame(window.name)
                    });
                }
                Dialog.errorMsg("操作失败！");
            }
        });
    }

</script>

</body>
</html>
